<template>
	<view class="contain">
		<!-- <view class="containTop">

		</view> -->
		<!-- <view class="containCenterTop">
			<uni-icons type="left" size="30"></uni-icons>
			<view class="containCenterText">
				会员中心
			</view>
		</view> -->
		<view class="containCenter">
			<view class="containInfo">
				<view class="containInfoTop">
					<view class="containInfoTopLeft">
						<image :src="userInfo.avatar" mode=""></image>
					</view>
					<view class="containInfoTopRight">
						<view class="containInfoTextTop">
							{{userInfo.nickname ? userInfo.nickname : '暂无'}}
						</view>
						<view class="containInfoTextBottom">
							高级服务，只为尊贵的您
						</view>
					</view>
				</view>
				<view class="containInfoCenter">
					<view class="containInfoCenterLeft">
						<image src="@/static/my/zuanshi.png" mode=""></image>
						<text>超低价</text>
					</view>
					<view class="containInfoCenterRight">
						<image src="@/static/my/fuli.png" mode=""></image>
						<text>福利尊享</text>
					</view>
				</view>
				<view class="containInfoBottom" @click="goBuyVip">
					立即开通
				</view>
				<view class="lowPrice">
					立享超低价
				</view>
			</view>
		</view>
		<view class="containBottom">
			<view class="containBottomInfo">
				<view class="containBottomInfoTop">
					<image src="@/static/my/xiang.png" mode=""></image>
				</view>
				<view class="containBottomInfoBottom">
					<view class="containInfoTop">
						<view class="bottomInfoFirst">
							尊享一
						</view>
						<view class="bottomInfoSecond">
							尊享二
						</view>
					</view>
					<view class="containInfoBottomCon">
						<view class="bottomInfoThird">
							尊享三
						</view>
						<view class="bottomInfoFourth">
							尊享四
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getUserInfo
	} from '@/api/my.js'
	import {
		ref,
		onMounted,
		reactive
	} from 'vue'
	const userInfo = reactive({
		nickname: '', //用户名
		avatar: '', //用户头像
	})
	//获取用户信息
	onMounted(() => {
		// 在这里执行获取数据或初始化操作
		getUserInfo().then(res => {
			userInfo.avatar = res.data.avatar
			userInfo.nickname = res.data.nickname
		})
	});
	// 跳转到开通会员页面
	const goBuyVip = () => {
		uni.navigateTo({
			url: '/pages/my/goBuyVip'
		})
	}
	// 跳转到上一页
	const goBack = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss">
	.contain {
		width: 100%;
		height: 100vh;
		padding-top: 10rpx;
		background: linear-gradient(to bottom, #ff6d80, 40%, #fff6fa);

		.containTop {
			width: 100%;
			height: 80rpx;
		}

		// 页面顶部文字信息
		.containCenterTop {
			width: 100%;
			height: 120rpx;
			display: flex;
			align-items: center;

			.containCenterText {
				width: 100%;
				text-align: center;
				margin-right: 30rpx;
				font-size: 40rpx;
			}
		}

		// 中心信息介绍
		.containCenter {
			padding: 0 20rpx;

			.containInfo {
				width: 100%;
				height: 28vh;
				padding: 20rpx;
				background-color: #fff3df;
				border-radius: 20rpx;

				.containInfoTop {
					width: 100%;
					height: 10vh;
					display: flex;

					.containInfoTopLeft {
						width: 100rpx;
						height: 100rpx;
						// background-color: cadetblue;
						border-radius: 20rpx;

						/* #ifdef H5 */
						image {
							width: 100%;
							height: 100%;
						}

						/*#endif*/

					}

					.containInfoTopRight {
						flex: 1;
						height: 100rpx;
						padding-left: 20rpx;
						padding-top: 10rpx;

						.containInfoTextTop {
							height: 50rpx;
							font-weight: 600;
						}

						.containInfoTextBottom {
							font-weight: 600;
							color: #582f2f;
						}
					}
				}

				.containInfoCenter {
					width: 100%;
					height: 5vh;
					display: flex;

					.containInfoCenterLeft {
						width: 30%;
						height: 5vh;
						display: flex;

						image {
							width: 50rpx;
							height: 5vh;
						}

						text {
							margin-left: 10rpx;
							line-height: 5vh;
							color: #582f2f;
							font-weight: 600;
						}
					}

					.containInfoCenterRight {
						height: 5vh;
						// background-color: #fff;
						flex: 1;
						display: flex;

						image {
							width: 50rpx;
							height: 4vh;
						}

						text {
							margin-left: 10rpx;
							line-height: 5vh;
							color: #582f2f;
							font-weight: 600;
						}
					}
				}

				// 立即开通
				.containInfoBottom {
					width: 100%;
					height: 6vh;
					margin-top: 40rpx;
					background-color: #fee4a7;
					border-radius: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 600;
					color: #582f2f;
					position: relative;
				}

				// 立享超低价
				.lowPrice {
					width: 150rpx;
					height: 40rpx;
					background-color: #ff6161;
					text-align: center;
					line-height: 40rpx;
					border-radius: 15rpx;
					position: absolute;
					top: 31%;
					right: 8%;
					// #ifdef H5
					top: 33%;
					// #endif
				}
			}
		}

		// 底部信息介绍
		.containBottom {
			width: 100%;
			margin-top: 50rpx;
			padding: 0 20rpx;

			.containBottomInfo {
				width: 100%;
				height: 30vh;
				background-color: #fff3df;
				border-radius: 20rpx;
				border: 1rpx solid #ffd455;
				padding: 0 20rpx;
				padding-bottom: 20rpx;

				// 会员专享图片
				.containBottomInfoTop {
					width: 100%;
					height: 100rpx;

					image {
						width: 130rpx;
						height: 100rpx;
					}
				}

				// 专享区域
				.containBottomInfoBottom {
					width: 100%;
					height: 260rpx;
					color: #582f2f;
					margin-top: 10rpx;

					.containInfoTop {
						width: 100%;
						height: 48%;
						display: flex;
						justify-content: space-between;

						.bottomInfoFirst {
							width: 48%;
							height: 90%;
							background-color: #fee4a7;
							border-radius: 20rpx;
						}

						.bottomInfoSecond {
							width: 48%;
							height: 90%;
							background-color: #fee4a7;
							border-radius: 20rpx;

						}
					}

					.containInfoBottomCon {
						width: 100%;
						height: 50%;
						display: flex;
						justify-content: space-between;

						.bottomInfoThird {
							width: 48%;
							height: 90%;
							background-color: #fee4a7;
							border-radius: 20rpx;
						}

						.bottomInfoFourth {
							width: 48%;
							height: 90%;
							background-color: #fee4a7;
							border-radius: 20rpx;

						}
					}
				}
			}
		}
	}
</style>